<template>
  <div class="cart">
    <table>
      <thead>
        <th width="50">
          <!-- 
          YDUI-复选框(选中) icon-yduifuxuankuangxuanzhong 
          YDUI-复选框       icon-yduifuxuankuang -->
          <i
            :class="
              checkAll
                ? 'iconfont icon-yduifuxuankuangxuanzhong'
                : 'iconfont icon-yduifuxuankuang'
            "
            @click="checkAllFn"
          ></i>
        </th>
        <th>礼品信息</th>
        <th>兑换分数</th>
        <th>数量</th>
        <th>小计(鸡腿)</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) in goodsArr" :key="index">
          <td align="center">
            <i
              :class="
                item.isChecked
                  ? 'iconfont icon-yduifuxuankuangxuanzhong'
                  : 'iconfont icon-yduifuxuankuang'
              "
              @click="checkOneFn(index)"
            ></i>
          </td>
          <td>
            <img
              width="84"
              class="goods_simg"
              :src="'https://sc.wolfcode.cn' + item.coverImg"
              alt=""
            />
            <section>
              <div class="title">{{ item.title }}</div>
              <div class="desc">{{ item.versionDescription }}</div>
            </section>
          </td>
          <td align="center">{{ item.coin }}鸡腿</td>
          <td align="center">
            <div class="stepper tanxin">
              <div class="btn jia" @click="addFn">+</div>
              <input type="text" disabled v-model="stepNum" />
              <div class="btn jian" @click="clFn">-</div>
            </div>
          </td>
          <td align="center">{{ item.totalCost }}鸡腿</td>
          <td align="center">
            <div class="btn_del">删除</div>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>总计 : <span> 1800鸡腿 </span></h3>
    <div class="submit">提交</div>
  </div>
</template>

<script>
import { GetCartDataApi, DelCartDataApi } from "@/request/api";
export default {
  data() {
    return {
      //   步进器的值
      stepNum: 1,
      // 商品列表数据
      goodsArr: [],
      //  全选的状态
      checkAll: false,
    };
  },
  methods: {
    addFn() {
      // if (this.stepNum >= this.productInfo.stock) {
      //   return;
      // }

      this.stepNum++;
    },
    clFn() {
      if (this.stepNum <= 1) {
        return;
      }
      this.stepNum--;
    },
    // 全选按钮
    checkAllFn() {
      this.checkAll = !this.checkAll;
      this.goodsArr.map((item) => {
        item.isChecked = this.checkAll;
      });
    },
    // 单选按钮
    checkOneFn(index) {
      this.goodsArr[index].isChecked = !this.goodsArr[index].isChecked;
      //   console.log(this.goodsArr[index]);
      //  判断是否全部选中
      let sum = 0;
      this.goodsArr.map((item) => {
        if (item.isChecked) {
          sum++;
        }
      });

      //   修改全选的状态
      this.checkAll = sum >= this.goodsArr.length;
      // 数据更新了 ，视图没更新
      this.$forceUpdate(); // 强制更新
    },
  },
  created() {
    GetCartDataApi().then((res) => {
      this.goodsArr = res.data.data;
      // 给每一个数据 加一个 isChecked 属性 ，代表 用来让用户进行选择的操作
      this.goodsArr.forEach((item) => {
        item.isChecked = false;
      });
      // console.log( this.goodsArr);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";

.cart {
  table {
    width: 100%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    thead {
      background: #efefef;
      th {
        padding: 20px 0;
        font-weight: bold;
      }
    }
    i {
      cursor: pointer;
      &.icon-yduifuxuankuangxuanzhong {
        color: @blue;
      }
    }
    tbody {
      tr {
        td {
          padding: 20px 0;
          vertical-align: middle;
          &:nth-of-type(2) {
            display: flex;
            justify-content: center;
            section {
              float: left;
              margin-left: 5px;
              padding-top: 20px;
              div {
                width: 160px;
              }
              .title {
                margin-bottom: 15px;
                text-indent: 2em;
              }
              .desc {
                color: #666;
                text-indent: 2em;
              }
            }
          }

          .stepper {
            background: #fff;
            width: 105px;
            .btn {
              width: 30px;
              height: 32px;
              border: 1px solid #d1d1d1;
              text-align: center;
              box-sizing: border-box;
              line-height: 32px;
              color: #ccc;
              cursor: pointer;
            }
            input {
              width: 45px;
              border: 0;
              box-sizing: border-box;
              text-align: center;
              border-top: 1px solid #ccc;
              border-bottom: 1px solid #ccc;
            }
          }
          .btn_del {
            display: inline;
            border: 1px solid #ccc;
            cursor: pointer;
            padding: 5px 20px;
          }
        }
      }
    }
  }
  h3 {
    text-align: right;
    font-size: 22px;
    color: #000;
    margin-top: 20px;
    margin-bottom: 20px;
    span {
      color: @orange;
    }
  }
  .submit {
    background: #0a328e;
    color: #fff;
    text-align: center;
    line-height: 40px;
    height: 40px;
    width: 100px;
    float: right;
    cursor: pointer;
  }
}
</style>